<template>
  <div class="app">
    <!-- <van-icon name="arrow-left" /> -->
    <van-search v-model="value" placeholder="搜索已关注的人" />
    <p style="margin-left: 15px; ">
      我的关注({{ num }})</p>
    <div class="Chat-body">
      <div class="inform" v-for="(item,index) in list" :key="index">
        <span style="display: flex;">
          <div class="inform-i">
          <img src="../assets/01.webp" alt="" />
        </div>
        <div class="inform-message">
          <span class="me">{{ item.name }}</span>
        </div>
        </span>
        
        <div class="data">
          <button style="border-radius: 10px; height: 25px; padding: 0px 10px; font-size: 10px; border: 1px solid darkgrey; background: white;">已关注</button>
          <p style="font-size: 20px; " >...</p>
          <!-- <span>05/28</span>
          <van-badge :content="1" class="tips" /> -->
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import { attenti } from "@/api/mint";
export default {
  data() {
    return {
      name: 'aaa',
      num: 2,
      list: [],
      value: '',
      d:''
    }
  },
  methods: {
    a() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      console.log(123);
      attenti({
        uid:this.d
      }).then(res => {
        console.log(res);
        this.list = res.result
        this.num = this.list.length
      })
    }
  },
  mounted() {
    this.a()
  }
};
</script>

<style scoped>
.app{
  padding: 0;
  /* margin-left: 30px; */
}
.inform-i > img {
  width: 100%;
  height: 100%;
}
.Chat-body {
  margin-top: 20px !important;
  width: 90%;
  height: 100px;
  margin: 0 auto;
}
.inform {
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.inform-i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgb(189, 224, 231);
  border-radius: 50px;
  overflow: hidden;
}

.inform-message {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 50px;
  font-size: 13px;
}
.me {
  font-size: 18px;
  margin-left: 10px;

}
.tips {
  line-height: 22px;
  width: 22px;
  text-align: center;
  border-radius: 20px;
}
.data {
  display: flex;
  /* flex-direction: column;
  justify-content: space-between; */
  align-items: center;
  /* font-size: 14px; */
  /* line-height: 50px; */
}
.data p{
  font-size: 12px;
  color: rgb(168, 172, 172);
  display: inline-block;
  line-height: 30px;
  margin: 0;
  height: 40px;
  margin-left: 10px;
}
</style>